<template>
  <view class="tabbar-container">
	  <!-- 导航栏 -->
	  <view
		class="tabbar-item"
		v-for="(item, index) in tabbarList"
		:class="[item.centerItem ? 'center-item' : '']"
		@click="changeItem(item)"
		:key="item.id"
	  >
		<view class="item-top">
		  <image
			:src="currentItem == item.id ? item.selectIcon : item.icon"
		  ></image>
		</view>
		<view
		  class="item-bottom"
		  :class="[currentItem == item.id ? 'item-active' : '']"
		>
		  <text>{{ item.text }}</text>
		</view>
	  </view>
	<!-- 遮罩层 -->
		<u-overlay :show="show" @click="show = false" opcity='0.5'>
				<view class="overlay-wrap">
					<div class='to t1' @click="lie">
						<view class="overlay-wrap__box">
							<img src="../static/image/tabBar/闲置.png" alt="">
						</view>
						<span class='title'>发布闲置</span>
					</div>
					<div class='to t2' @click="topic">
						<view class="overlay-wrap__box">
							<img src="../static/image/tabBar/话题.png" alt="">
						</view>
						<span class='title'>发布话题</span>
					</div>
					<div class='close'>
						<image style="width: 60px;height: 60px;" src="../static/image/tabBar/关闭.jpg"></image>
					</div>
				</view>
				
		</u-overlay>
  </view>
</template>

<script>
export default {
  props: {
    currentPage: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
		currentItem: 0,
		show: false,
		tabbarList: [
			{
			   id: 0,
			   path: "/pages/Home/Home",
			   icon: "../../static/image/tabBar/首页-未选中.png",
			   selectIcon: "../../static/image/tabBar/首页-选中.png",
			   text: "首页",
			   centerItem: false,
			},
			{
				id: 1,
				path: "/pages/Square/Square",
				icon: "../../static/image/tabBar/广场-未选中.png",
				selectIcon: "../../static/image/tabBar/广场-选中.png",
				text: "广场",
				centerItem: false,
			},
			{
				id: 2,
				icon: "../../static/image/tabBar/发布.png",
				text: "发布",
				centerItem: true,
			},
			{
			   id: 3,
			   path: "/pages/Message/Message",
			   icon: "../../static/image/tabBar/消息-未选中.png",
			   selectIcon: "../../static/image/tabBar/消息-选中.png",
			   text: "消息",
			   centerItem: false,
			},		
			{
			   id: 4,
			   path: "/pages/Center/Center",
			   icon: "../../static/image/tabBar/我的-未选中.png",
			   selectIcon: "../../static/image/tabBar/我的-选中.png",
			   text: "我的",
			   centerItem: false,
			},
      ],
    };
  },
  mounted() {
    this.currentItem = this.currentPage;
  },
  methods: {
    changeItem(item) {
	  if (item.id == 2) {
		  this.show = true;
		  // console.log(this.show);
		}
		// console.log(item.path)
      uni.switchTab({
        url: item.path,
      });
    },
	lie(){
		uni.navigateTo({
			url:"/pages/release/lie"
		})
	},
	topic(){
		uni.navigateTo({
			url:"/pages/release/topic"
		})
	}
	
  },
};
</script>
<style lang="scss" scope>
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.u-fade-enter-active{
	background-color:#fff !important;
}

.overlay-wrap {
	.to{
		// width: 120upx;
		display: inline-block;
		position: absolute;
	}
	.t1{
		top: 60%;
		left: 20%;
	}
	.t2{
		top: 60%;
		left: 60%;
	}
	.close{
		position: absolute;
		top: 87.5%;
		left: 42%;
		
	}
	&__box {
		width: 180upx;
		height: 180upx;
		background-color: #fff;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		img{
			width: 100%;
			height: 100%;
		}
	}
	.title{
		display: block;
		font-size: 14upx;
		margin: 20upx 10upx;
		text-align: center;
		color:  #000;
	}
}
.note{
	width: 120px;
	height: 120px;
	background-color: #fff;
}
.tabbar-container {
  position: fixed;
  bottom: 0rpx;
  left: 0rpx;
  width: 100%;
  height: 120rpx;
  // box-shadow: 0 0 5px #999;
  border-top: 1upx solid #F9F9F9;
  display: flex;
  align-items: center;
  padding: 5rpx 0;
  color: #999999;
  background-color: #fff;
  /* 针对tabbar的统一处理 */
  .tabbar-item {
    width: 33.33%;
    height: 100rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    .item-top {
      width: 70rpx;
      height: 80rpx;
      padding: 10rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
    // 未被选中的导航栏字体
    .item-bottom {
      font-size: 28rpx;
      width: 100%;
    }
    // 被选中的导航栏字体
    .item-active {
      color: #28D2D1;
    }
  }

  // 最中间的tabbar导航栏
  .center-item {
    display: block;
    position: relative;
    .item-top {
      flex-shrink: 0;
      width: 140rpx;
      height: 170rpx;
      position: absolute;
      top: -60rpx;
      left: calc(50% - 70rpx);
      border-radius: 50%;
      // box-shadow: 0 0 5px #999;
      // background-color: rgb(240, 63, 131);
    }
    .item-bottom {
      position: absolute;
      bottom: 5rpx;
    }
    .item-active {
      position: absolute;
      bottom: 5rpx;
      color: blue;
    }
  }
}
</style>